<!doctype html>
<html>
<head>
<title>Home</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="keywords" content="爱跑空间,跑步社交,iRunZone,Running,Zone" />
<script type="application/x-javascript"> addEventListener("load", function() { setTimeout(hideURLbar, 0); }, false); function hideURLbar(){ window.scrollTo(0,1); } </script>
<!--bootstrap-->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" media="all">
<!--coustom css-->
<link href="css/style.css" rel="stylesheet" type="text/css"/>
<!--script-->
<script src="js/jquery-1.11.0.min.js"></script>
<!-- js -->
<script src="js/bootstrap.js"></script>
<!-- /js -->
<!--fonts-->
<link href='css/googlecssfamily.css' rel='stylesheet' type='text/css'>
<!--/fonts-->
<!--hover-girds-->
<link rel="stylesheet" type="text/css" href="css/default.css" />
<link rel="stylesheet" type="text/css" href="css/component.css" />
<script src="js/modernizr.custom.js"></script>
<!--/hover-grids-->
<script type="text/javascript" src="js/move-top.js"></script>
<script type="text/javascript" src="js/easing.js"></script>
<!--script-->
<script type="text/javascript">
			jQuery(document).ready(function($) {
				$(".scroll").click(function(event){
					event.preventDefault();
					$('html,body').animate({scrollTop:$(this.hash).offset().top},900);
				});
			});
</script>
<!--/script-->
</head>
	<body>
<!--header-->
		<div class="header" id="home">
			<nav class="navbar navbar-default">
				<div class="container">
					<!-- Brand and toggle get grouped for better mobile display -->
					<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
						<span class="sr-only">Toggle navigation</span>
						<span class="icon-bar"> </span>
						<span class="icon-bar"> </span>
						<span class="icon-bar"> </span>
					</button>
					<h1><a class="navbar-brand" href="index.html">iRunZone<br /><span>爱跑空间</span></a></h1>
					</div>
					<!-- Collect the nav links, forms, and other content for toggling -->
						<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
							<ul class="nav navbar-nav navbar-right margin-top cl-effect-2">
								<li><a href="index.html"><span data-hover="Home">首页</span></a></li>
								<li><a href="activity.html"><span data-hover="Activity">活动</span></a></li>
								<li><a href="action.html"><span data-hover="Actions">动态</span></a></li>
								<li><a href="group.html"><span data-hover="Group">小组</span></a></li>
								<li><a href="statistic.html"><span data-hover="Statistic">统计</span></a></li>
								<li><a href="person_activity.html"><span data-hover="Statistic">个人主页</span></a></li>
							</ul>
							<div class="clearfix"> </div>
						</div><!-- /.navbar-collapse -->
				<!-- /.container-fluid -->
				<div class="login-pop">
						<div id="loginpop"><a href="#" id="loginButton"><span>登陆</span></a>
								<div id="loginBox">
									<form id="loginForm">
											<fieldset id="body">
												<fieldset>
													  <label for="email">邮箱</label>
													  <input type="text" id="email">
												</fieldset>
												<fieldset>
														<label for="password">密码</label>
														<input type="password" id="password">
												 </fieldset>
												<input type="submit" id="login" value="登陆">
												<label for="checkbox"><input type="checkbox" id="checkbox"> <i>记住我</i></label>
											</fieldset>
										<span><a href="#">忘记密码?</a></span>
								 </form>
							</div>
					    </div>
					    </div><script src="js/menu_jquery.js"></script>
					    </div>
			</nav>
<!--/script-->
		   <div class="clearfix"> </div>
</div>
<!-- Top Navigation -->
<div class="banner">
	<div class="container">
	<script src="js/responsiveslides.min.js"></script>
 <script>
    $(function () {
      $("#slider").responsiveSlides({
      	auto: true,
      	nav: true,
      	speed: 500,
        namespace: "callbacks",
        pager: true,
      });
    });
  </script>
<div class="slider">
		   <div class="callbacks_container">
			  <ul class="rslides" id="slider">
				 <li>
				 	<h3>加入小组</h3>
					 <p>与志同道合的好友一起坚持、互相鼓励！</p>
					<div class="readmore">
				 	<a href="group.html">去加入<i class="glyphicon glyphicon-menu-right"> </i></a>
				 	</div>
				 </li>
				 <li>
				 	<h3>参加活动</h3>
					 <p>参加小组PK赛或是个人PK赛，看看谁更有毅力，谁走得更远！</p>
				 <div class="readmore">
				 <a href="activity.html">去参加<i class="glyphicon glyphicon-menu-right"> </i></a>
				 </div>
				 </li>
				 <li>
				 	<h3>发表动态</h3>
					 <p>说说你今天做了什么，有什么好的经验要和大家一起分享吗？快写下来吧！</p>
				<div class="readmore">
				 <a href="activity.html">去发布<i class="glyphicon glyphicon-menu-right"> </i></a>
				 </div>
				 </li>
			  </ul>
		  </div>
	  </div>
</div>
	</div>
<!--header-->
<!--weelcome-->
<div class="welcome">
	<div class="container">
		<h2>欢迎来到爱跑空间</h2>
		<p>踏上跑道，是一种选择。离开起点，是一种勇气。驰骋赛场，是一种胜利。</p>
	</div>
</div>
<!--/welcome-->
<div class="welcome-grids">
	<div class="container">
		<div class="welcome-gridsinfo">
		<div class="col-md-3 welcome-grid">
			<i class="glyphicon glyphicon-pencil"> </i>
			<h3>步数</h3>
			<p>设定你的目标，每天要走到多少步？</p>
		</div>
		<div class="col-md-3 welcome-grid">
			<i class="glyphicon glyphicon-font"> </i>
			<h3>距离</h3>
			<p>统计步行+跑步距离，今天，你前进了多远？</p>
		</div>
		<div class="col-md-3 welcome-grid">
			<i class="glyphicon glyphicon-blackboard"> </i>
			<h3>轨迹</h3>
			<p>我走过的每一步都有风景，你走的每一步都有故事。</p>
		</div>
		<div class="col-md-3 welcome-grid">
			<i class="glyphicon glyphicon-education"> </i>
			<h3>跑步时间</h3>
			<p>成功源于坚持。</p>
		</div>
		<div class="clearfix"> </div>
		</div>
	</div>
</div>

<!--specfication-->
<div class="news">
		<div class="container">
			<div class="news-text">
				<h3>热门动态</h3>
				<p>在这里，发现更多...</p>
			</div>
			<div class="news-grids">
				<div class="col-md-3 news-grid">
					<a href="#"><h4>核心打造强劲引擎</h4></a>
					<span>8.00 - 10.00 | Oct 09,2016</span>
					<a href="#" class="mask"><img src="images/img1.jpg" alt="image" class="img-responsive zoom-img"></a>
					<div class="news-info">
						<p>传说中的电动小马达，八块腹肌，马甲线，通过核心改造get起来！</p>
					</div>
				</div>
				<div class="col-md-3 news-grid">
					<a href="#"><h4>信念不死，健身不止</h4></a>
					<span>10.00 - 12.00 | Sep 24,2016</span>
					<a href="#" class="mask"><img src="images/img2.jpg" alt="image" class="img-responsive zoom-img"></a>
					<div class="news-info">
						<p>揣上坚强的信念，开始成长的旅行。</p>
					</div>
				</div>
				<div class="col-md-3 news-grid">
					<a href="#"><h4>跑过自己</h4></a>
					<span>9.00 - 10.00 | Oct 15,2016</span>
					<a href="#" class="mask"><img src="images/img3.jpg" alt="image" class="img-responsive zoom-img"></a>
					<div class="news-info">
						<p>更新至最新版本，定制跑步课程表，我来教你如何跑步！</p>
					</div>
				</div>
				<div class="col-md-3 news-grid">
					<a href="#"><h4>感谢自己又坚持了一天</h4></a>
					<span>11.00 - 10.00 | OCT 10,2016</span>
					<a href="#" class="mask"><img src="images/img4.jpg" alt="image" class="img-responsive zoom-img"></a>
					<div class="news-info">
						<p>感谢自己又坚持了一天，离马甲线又近了一步。</p>
					</div>
				</div>
				<div class="clearfix"> </div>
			</div>
		</div>
	</div>
<!--/specfication-->
<!--footer-->
<div class="footer">
		<!-- container -->
		<div class="container">
			<div class="col-md-6 footer-left">
				<ul>
					<li><a href="index.html">首页</a></li>
					<li><a href="activity.html">活动</a></li>
					<li><a href="action.html">动态</a></li>
					<li><a href="group.html">小组</a></li>
					<li><a href="statistic.html">统计</a></li>
				</ul>
				<form>
					<input type="text" placeholder="Email" required="">
					<input type="submit" value="提交">
				</form>
			</div>
			<div class="col-md-3 footer-middle">
				<h3>地址</h3>
				<div class="address">
					<p>南京大学
						<span>鼓楼校区</span>
					</p>
				</div>
				<div class="phone">
					<p>2345-6789</p>
				</div>
			</div>
			<div class="col-md-3 footer-right">
				<h3>关于</h3>
				<p>本页面基于bootstrap框架制作</p>
			</div>
			<div class="clearfix"> </div>
		</div>
		<!-- //container -->
	</div>
<!--/footer-->
<!--copy-rights-->
<div class="copyright">
		<!-- container -->
		<div class="container">
			<div class="copyright-left">
			<p>Copyright &copy; 2016.CuiHao All rights reserved.<a target="_blank" href="http://blog.csdn.net/cuiods">   访问博客</a></p>
			</div>
			<div class="copyright-right">
				<ul>
					<li><a href="#" class="twitter"> </a></li>
					<li><a href="#" class="twitter facebook"> </a></li>
					<li><a href="#" class="twitter chrome"> </a></li>
					<li><a href="#" class="twitter pinterest"> </a></li>
					<li><a href="#" class="twitter linkedin"> </a></li>
					<li><a href="#" class="twitter dribbble"> </a></li>
				</ul>
			</div>
			<div class="clearfix"> </div>

		</div>
		<!-- //container -->
		<!---->
<script type="text/javascript">
		$(document).ready(function() {
				/*
				var defaults = {
				containerID: 'toTop', // fading element id
				containerHoverID: 'toTopHover', // fading element hover id
				scrollSpeed: 1200,
				easingType: 'linear'
				};
				*/
		$().UItoTop({ easingType: 'easeOutQuart' });
});
</script>
<a href="#to-top" id="toTop" style="display: block;"> <span id="toTopHover" style="opacity: 1;"> </span></a>
<!---->
	</div>
<!--/copy-rights-->
	</body>
</html>
